<template>
  <view class="index">
    <u-modal :show="isTuichu" showCancelButton @cancel='isTuichu=false' @confirm="exit" title="退出登录" content='确定退出登录?'>
    </u-modal>
    <u-popup :show="iptShowo" :zIndex="999999" :round="10" mode="bottom" @close="iptclose">
      <view class="title">
        共{{plDetail.plNum}}条评论
      </view>
      <scroll-view scroll-y="true">
        <view class="plmain">
          <view v-if="plFDetail.length!=0" @click="sonpl(e)" v-for='(e,i) in plFDetail' :key="e._id" class="item">
            <view class="itemleft">
              <u-avatar size='56' :src="basesrc+e.userInfo[0].avator"></u-avatar>
            </view>
            <view class="itemright">
              <view class="info">
                <view class="nickname">
                  {{ e.userInfo[0].nickname}}
                </view>
                <view class="time">
                  {{e.createTime}}
                </view>
              </view>
              <view class="itemcontent">
                <u-read-more textIndent="0" ref="uReadMore" showHeight="80" toggle closeText="展开" openText="收起">
                  <u--text size="16" :text="e.plcontent"></u--text>
                </u-read-more>
              </view>
              <view v-show="plSDetail.filter(s=>s.beplplid==e._id).splice(0,2)!=0"
                @click="goIptShow(plSDetail.filter(s=>s.beplplid==e._id))" class="plq">
                <view v-for="(ea,ia) in plSDetail.filter(s=>s.beplplid==e._id).splice(0,2)" :key="ea._id"
                  class="plqitem">
                  <text>{{ea.userInfo[0].nickname}}</text>:{{ea.plcontent}}
                </view>
                <view class="all">
                  <text>共{{plSDetail.filter(s=>s.beplplid==e._id).length}}条回复</text>
                  <u-icon size="15" color="deepskyblue" name="arrow-right"></u-icon>
                </view>
              </view>
            </view>
          </view>


          <view class="sendKey">
            <view class="sendKeya">
              <textarea maxlength="600" :adjust-position="false" v-model="plvalueo" auto-focus :focus="iptShowo"
                auto-height :placeholder="placeholdero" />
              <view @click="sendplo()" class="sendBtn">
                发送
              </view>
            </view>
          </view>
          <!--        <view style="height: 240rpx;width: 100vw;">

          </view> -->

        </view>
      </scroll-view>
    </u-popup>
    <u-popup :show="iptShowi" closeable :round="10" mode="bottom" @close="iptShowi=false">
      <scroll-view scroll-y="true">
        <view class="plmain">
          <view class="title">
            相关回复共{{detailInfo.length}}条
          </view>
          <view v-for="(ea,ia) in detailInfo" :key="ea._id" class="item">
            <view class="itemleft">
              <u-avatar size='56' :src="basesrc+ea.userInfo[0].avator"></u-avatar>
            </view>
            <view class="itemright">
              <view class="info">
                <view class="nickname">
                  {{ea.userInfo[0].nickname}}
                </view>
                <view class="time">
                  {{ea.createTime}}
                </view>
              </view>
              <view class="itemcontent">
                <u-read-more textIndent="0" ref="uReadMore" showHeight="180" toggle closeText="展开" openText="收起">
                  <u--text size="16" :text="ea.plcontent"></u--text>
                </u-read-more>
              </view>
            </view>
          </view>

          <view class="sendKey">
            <view class="sendKeya">
              <textarea maxlength="600" :adjust-position="false" v-model="plvaluei" auto-focus :focus="iptShowi"
                auto-height :placeholder="placeholderi" />
              <view @click="sendpli()" class="sendBtn">
                发送
              </view>
            </view>
          </view>
          <view style="height: 240rpx;width: 100vw;">
          </view>
        </view>
      </scroll-view>
    </u-popup>
    <view v-if='cshowindex==newsindex && guoshen'>
      <image style="width: 100vw;height: 100vh;" src="../../static/images/e45dc11bcdb3e4e435ae46b4daf14ce.jpg" mode="">
      </image>
    </view>
    <blockquote v-show='cshowindex==newsindex && !guoshen'>
      <view class="top">
        <search bgColor='#c00000'>
          <blockquote slot="leftMain">
            <u-image @click="gouserinfo" shape="circle" width="66rpx" height="66rpx"
              :src="userinfo&&basesrc+userinfo.avator" :lazy-load="true"></u-image>
          </blockquote>
          <blockquote @click='goSearch' slot="centerMain">
            <u--input color='white' placeholder="请输入搜索内容" prefixIcon="search" disabledColor='black' clearable readonly
              prefixIconStyle="font-size: 44rpx;color: #909399">
            </u--input>
          </blockquote>
          <blockquote @click="gofb" slot="rightMain">
            <view class="right">
              <u-icon name="plus-circle-fill" color="white" size="28"></u-icon>
              <text class="publish">发布</text>
            </view>
          </blockquote>
        </search>
      </view>
      <scroll-view class="scrollView" scroll-x="true" :scroll-left="scrollPositon">
        <view v-for="(e,i) in list" :key='e._id' @click="changeTarget(i,e._id)" :class="index==i?'cate act':'cate'">
          <text :class="index==i?'tbact':'tb'"> {{e.cate}}</text>
        </view>
      </scroll-view>
      <view class="test">
        <view class="testa">
          <view @click="goDetail(e)" v-for="e in hotData" :key='e._id' class="hot">
            <view class="title">{{e.title.replace(/\s*/g,"")}}</view>
            <view class="btext">
              <text>置顶</text> <text>{{e.origin}}</text> <text>{{e.hotRate}}评论</text>
            </view>
          </view>
        </view>
        <view class="testb">
          <view @click="goDetail(e)" v-for="e in allData" :key='e._id' class="item">
            <view class="left">
              <view class="left_title">
                <text>{{e.title}}</text>
              </view>
              <view class="left_detail">
                <text>{{e.origin}}</text> <text>{{e.hotRate}}评论</text> <text>{{e.time}}</text>
              </view>
            </view>
            <view class="right">
              <image :src="e.cover" mode=""></image>
            </view>
          </view>
        </view>
        <view v-if="isloading" class="testh">
          {{loadText}}
        </view>
      </view>
    </blockquote>
    <blockquote v-if='cshowindex==five14index'>
      <view v-if="!isLogin" class="wdll">
        <text>请登录后查看朋友圈</text>
      </view>
      <view v-if="isLogin" class="five14index">
        <view v-for="(e,i) in fabuinfo.filter(e=>e.status==true)" :key="e._id" class="u-demo-block__content">
          <view class="album">
            <u-image width="84rpx" height="84rpx" :src="basesrc+e.info[0].avator" :lazy-load="true"></u-image>
            <view class="album__content">
              <u--text :text="e&&e.info[0].nickname" type="primary" size="17"></u--text>
              <u--text :text="e.createTime" margin=" 16rpx 0" color="gray" size="12"></u--text>
              <u--text margin="0 0 16rpx 0" color="white" :text="e.content"></u--text>
              <u-album v-if='e.imgs.length!=0' :urls="dealImgs(e.imgs)"></u-album>
            </view>
            <view @click="focusList.includes(e.info[0]._id)?ccancelfocus(e.info[0]._id):cdofocus(e.info[0]._id)"
              v-if="e.info[0]._id!=userinfo._id" :class="focusList.includes(e.info[0]._id)?'ygzbtn':'gzbtn'">
              {{focusList.includes(e.info[0]._id)?'已关注':'关注'}}
            </view>
          </view>
          <view class="footer">
            <view class="item">
              <u-icon name="share" color="white" size="26"></u-icon>
              <text>分享</text>
            </view>
            <view @click="pl(i)" class="item">
              <u-icon name="chat" color="white" size="26"></u-icon>
              <text>评论{{e.plNum}}</text>
            </view>
            <view @click="dianzanList.map(i=>i.befocusid).includes(e._id)?ccanceldianzan(e._id):cadddianzan(e._id)"
              class="item">
              <u-icon :name="dianzanList.map(i=>i.befocusid).includes(e._id)?'thumb-up-fill':'thumb-up'"
                :color="dianzanList.map(i=>i.befocusid).includes(e._id)?'red':'white'" size="26"></u-icon>
              <text>{{dianzanDeal(e._id)}}</text>
            </view>
            <view @click="shoucangList.map(i=>i.befocusid).includes(e._id)?ccancelshoucang(e._id):caddshoucang(e._id)"
              class="item">
              <u-icon :name="shoucangList.map(i=>i.befocusid).includes(e._id)?'star-fill':'star'"
                :color="shoucangList.map(i=>i.befocusid).includes(e._id)?'#ffee00':'white'" size="26"></u-icon>
              <text>{{shoucangList.map(i=>i.befocusid).includes(e._id)?'已收藏':'收藏'}}</text>
            </view>
          </view>
        </view>
      </view>

    </blockquote>
    <blockquote v-if='cshowindex==zbindex'>
      <view class="videoindex">
        <web-view src="https://www.ajeee.com/"></web-view>
        <!-- <publicVideo src="http://192.168.24.1:4321/video/test2.mp4"></publicVideo> -->
      </view>
    </blockquote>

    <blockquote v-show='cshowindex==mineindex'>
      <view v-show="isLogin" class="mineindex">
        <view class="mainInfo">
          <u-avatar size="100" :src="userinfo&&basesrc+userinfo.avator"></u-avatar>
          <view class="nickname">
            {{userinfo&&userinfo.nickname}}
          </view>
        </view>
        <view class="fun">
          <view @click="func(i)" v-for="(e,i) in funList" :key='e.name' class="item">
            <u-icon :name="e.icon" color="white" size="28"></u-icon>
            <view class="name">
              {{e.name}}
            </view>
          </view>
        </view>
        <u-gap height="10" bgColor="gray"></u-gap>
        <view class="fabu">
          <view class="info">
            <text>分享今天值得记录的瞬间</text>
            <view @click="gofb" class="btn">
              <u-icon name="plus" color="white" size="24"></u-icon>
              <text>发布</text>
            </view>
          </view>

        </view>
      </view>
      <view v-show="!isLogin" class="wdl">
        <view @click="gologin" class="dlbtn">
          登录
        </view>
      </view>
    </blockquote>
    <tabbar :cshowindex="cshowindex" @getcindex='cindex'></tabbar>
    <view class="ios" style="width: 100vw;height: 60rpx;">
    </view>
  </view>
</template>
<script>
  import search from '@/component/search/search.vue'
  import tabbar from '@/component/tabbar/tabbar.vue'
  // import publicVideo from '@/component/video/n/n.vue'
  import {
    getNewsCate,
    getNewsDetail,
    modeflag

  } from '@/api/getnews.js'
  import {
    getuserinfo,
    getfabudailyrecord,
    dofocus,
    cancelfocus,
    getfocuslist,
    adddianzan,
    addshoucang,
    canceldianzan,
    cancelshoucang,
    getdianzanlist,
    getshoucanglist,
    addhistory,
    addpl
  } from '@/api/user.js'
  import {
    cmode
  } from '../../env.js'
  import {
    mapState,
    mapMutations
  } from "vuex"
  var time = null
  export default {

    data() {
      return {
        urll: "",
        vlist: [{
            id: 1,
            preImg: "http://p1-q.mafengwo.net/s16/M00/8D/4D/CoUBUmFZOWKAA8mQAA8Oww0vs7k240.jpg",
            src: "http://192.168.24.1:4321/video/test.mp4"
          },
          {
            id: 2,
            preImg: "http://b1-q.mafengwo.net/s16/M00/23/F3/CoUBUmFbN5OAGqEkAA4O0V-U1uo031.jpg",
            src: "http://192.168.24.1:4321/video/test1.mp4"
          },
          {
            id: 3,
            preImg: "http://p1-q.mafengwo.net/s16/M00/23/F4/CoUBUmFbN5WAbMikAA5cYlWno5U709.jpg",
            src: "http://192.168.24.1:4321/video/test2.mp4"
          },
        ],
        pageStartY: 0,
        pageEndY: 0,
        swiperHeight: "0",
        isTuichu: false,
        placeholdero: "发一条友善的评论",
        placeholderi: "发一条友善的评论",
        funList: [{
          name: '关注列表',
          icon: "star",
          url: "/pages/gzList/gzList"
        }, {
          name: '浏览历史',
          icon: "file-text"
        }, {
          name: '资料编辑',
          icon: "setting"
        }, {
          name: '清除缓存',
          icon: "twitter"
        }, {
          name: '收到的赞',
          icon: "taobao"
        }, {
          name: '收藏列表',
          icon: "weixin-fill"
        }, {
          name: '评论回复',
          icon: "qzone"
        }, {
          name: '退出',
          icon: "baidu"
        }],
        basesrc: cmode,
        list: [],
        isLogin: false,
        index: 0,
        cateId: "",
        scrollPositon: 0,
        hotData: [],
        allData: [],
        nowNewsNum: 0,
        loadNewsNum: 0,
        isloading: true,
        loadText: "加载中...",
        total: 0,
        // 页码值
        pagenum: 1,
        // 每页显示多少条数据
        pagesize: 10,
        cshowindex: 0,
        newsindex: 0,
        mineindex: 3,
        zbindex: 2,
        five14index: 1,
        guoshen: false,
        focusList: [],
        dianzanList: [],
        shoucangList: [],
        iptShowo: false,
        iptShowi: false,
        plvalueo: "",
        plvaluei: "",
        beplarticleid: "",
        pltype: true,
        beplid: "",
        content: '',
        plFDetail: [],
        plSDetail: [],
        plDetail: [],
        plIndex: 0,
        beplplid: "",
        detailInfo: []
      };
    },
    computed: {
      ...mapState("m_test", ["statusBar", "systemBar", "customBar"]),
      ...mapState("m_login", ["userinfo", "fabuinfo"]),
      dianzanDeal() {
        return function(id) {
          let dianzanNumber = 0
          let item = this.dianzanList.filter(e => e.befocusid == id)[0]
          let index = this.dianzanList.findIndex(e => e.befocusid == id)
          let data = this.dianzanList.map(e => e.befocusid).includes(id) ? this.dianzanList[index].befoverInfo
            .length : '点赞'
          return data
        };
      },
      dealImgs() {
        return function(data) {
          if (data) {
            return data.map(e => this.basesrc + e)
          } else {
            return []
          }
        };
      }
    },
    components: {
      tabbar,
      search
    },
    methods: {
      ...mapMutations("m_test", ["setStatusBar", "setSystemBar", "setCustomBar", "setDetailInfo"]),
      ...mapMutations("m_login", ["setUserInfo", "setFabuinfo"]),
      swiPerFn(RES) {
        console.log(res);
      },
      change(res) {
        clearTimeout(time)
        this.page = res.detail.current
        time = setTimeout(() => {
          if (this.pageStartY > this.pageEndY) {
            console.log("向上滑动" + this.page);
            this.$refs.player[this.page].playVideo()
            this.$refs.player[this.page - 1].pauseVideo()
            this.pageStartY = 0
            this.pageEndY = 0
          } else {
            console.log("向下滑动" + this.page);
            this.$refs.player[this.page].playVideo()
            this.$refs.player[this.page + 1].pauseVideo()
            this.pageStartY = 0
            this.pageEndY = 0
          }
        }, 1)
      },
      touchStart(res) {
        this.pageStartY = res.changedTouches[0].pageY;
        console.log(this.pageStartY);
      },
      touchEnd(res) {
        this.pageEndY = res.changedTouches[0].pageY;
        console.log(this.pageEndY);
      },

      iptclose() {
        this.iptShowo = false
        this.placeholdero = `发一条友善的评论吧`
        this.pltype = true
      },
      gouserinfo() {
        this.$Router.push(`/subpkg/editinfo/editinfo`)
      },
      goIptShow(e) {
        this.detailInfo = e
        this.iptShowi = true
      },
      cdofocus(befocusedid) {
        dofocus({
          befocusid: befocusedid
        }).then(res => {
          if (res.code == 200) {
            uni.$u.toast(res.msg)
          } else {
            uni.clearStorage('token')
          }
        }).finally(() => {
          this.cgetfocuslist()
        })
      },
      cadddianzan(befocusedid) {
        uni.showLoading({
          title: '点赞中..'
        })
        adddianzan({
          befocusid: befocusedid
        }).then(res => {
          if (res.code == 200) {
            uni.$u.toast(res.msg)
          }
        }).finally(() => {
          this.cgetdianzanlist()
          uni.hideLoading()
        })
      },
      caddshoucang(befocusedid) {
        uni.showLoading({
          title: '收藏中..'
        })
        addshoucang({
          befocusid: befocusedid
        }).then(res => {
          if (res.code == 200) {
            uni.$u.toast(res.msg)
          }
        }).finally(() => {
          this.cgetshoucanglist()
          uni.hideLoading();
        })
      },
      sendplo() {
        uni.showLoading({
          title: '提交中..'
        })
        addpl({
          beplarticleid: this.beplarticleid,
          beplid: this.beplid,
          plcontent: this.plvalueo,
          isParent: this.pltype,
          beplplid: this.beplplid
        }).then(res => {
          this.plvalueo = ""
          uni.$u.toast(res.msg)
          this.cgetfabudailyrecord()
          this.placeholdero = `发一条友善的评论吧`
          this.pltype = true
          this.beplplid = ""
          uni.hideLoading()
        })
      },
      sonpl(e) {
        this.placeholdero = `回复用户${e.userInfo[0].nickname}`
        this.beplarticleid = e.beplarticleid
        this.beplid = e.plid
        this.pltype = false
        this.beplplid = e._id

      },
      pl(index) {
        this.plIndex = index
        this.beplarticleid = this.fabuinfo[index]._id
        this.beplid = this.fabuinfo[index].userid
        this.pltype = true
        this.iptShowo = true
        this.plDetail = this.fabuinfo[index]
        this.plFDetail = this.fabuinfo[index].plInfo.filter(e => e.isParent == true)
        this.plSDetail = this.fabuinfo[index].plInfo.filter(e => e.isParent == false)

      },
      updateplq(index, fabuinfo) {
        this.beplarticleid = fabuinfo[index]?._id
        this.beplid = fabuinfo[index]?.userid
        this.pltype = true
        this.plDetail = fabuinfo[index]
        this.plFDetail = fabuinfo[index].plInfo.filter(e => e.isParent == true)
        this.plSDetail = this.fabuinfo[index].plInfo.filter(e => e.isParent == false)
      },
      ccancelfocus(befocusedid) {
        cancelfocus({
          befocusid: befocusedid
        }).then(res => {
          if (res.code == 200) {
            uni.$u.toast(res.msg)
          }
        }).finally(() => {
          this.cgetfocuslist()
        })
      },
      ccanceldianzan(befocusedid) {
        uni.showLoading({
          title: '取消点赞中..'
        })
        canceldianzan({
          befocusid: befocusedid
        }).then(res => {
          if (res.code == 200) {
            uni.$u.toast(res.msg)
          }
        }).finally(() => {
          this.cgetdianzanlist()
          uni.hideLoading()
        })
      },
      ccancelshoucang(befocusedid) {
        uni.showLoading({
          title: '取消收藏中..'
        })
        cancelshoucang({
          befocusid: befocusedid
        }).then(res => {
          if (res.code == 200) {
            uni.$u.toast(res.msg)
          }
        }).finally(() => {
          this.cgetshoucanglist()
          uni.hideLoading()
        })
      },
      cgetfocuslist() {
        getfocuslist().then(res => {
          if (res.data && res.data.length != 0) {
            this.focusList = res.data.map(e => e.befocusid)
          } else {
            this.focusList = []
          }
        })
      },
      cgetdianzanlist() {
        getdianzanlist().then(res => {
          this.dianzanList = res.data || []
        })
      },
      cgetshoucanglist() {
        getshoucanglist().then(res => {
          this.shoucangList = res.data
        })
      },
      gofb() {
        this.isLogin = uni.getStorageSync('token')
        if (!this.isLogin) {
          return uni.$u.toast('请先登录')
        }
        this.$Router.push('/subpkg/fabu/fabu')
      },
      cindex(e) {
        this.cshowindex = e || 0
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 200
        })
        this.isLogin = uni.getStorageSync('token') ? true : false
      },
      gologin() {
        this.$Router.push('/subpkg/login/login')
        this.cshowindex = 0
      },
      cgetuserinfo() {
        getuserinfo().then(res => {
          if (res) {
            this.setUserInfo(res.data)
          }
        })
      },
      exit() {
        uni.clearStorageSync('token')
        this.isTuichu = false
        this.isLogin = uni.getStorageSync('token') ? true : false
        // this.setUserInfo({})
      },
      caddhistory(id) {
        addhistory({
          behistoryid: id
        }).then(res => {})
      },
      goDetail(e) {
        this.setDetailInfo(e)
        this.caddhistory(e._id)
        this.$Router.push(`/subpkg/newsDetail/newsDetail`)
      },
      cmodeflag() {
        modeflag().then(res => {
          if (res.data == 666) {
            this.guoshen = true
          }
        })
      },

      func(index) {
        if (index == 7) {
          this.isTuichu = true
        }
        if (index == 2) {
          this.$Router.push(`/subpkg/editinfo/editinfo`)
        }
        if (index == 0) {
          this.$Router.push(`/pages/gzList/gzList`)
        }
        if (index == 1) {
          this.$Router.push(`/pages/historyList/historyList`)
        }

        if (index == 3) {
          uni.clearStorage('token');
          uni.$u.toast('清除成功')
        }
        if (index == 4) {
          this.$Router.push(`/pages/sddz/sddz`)
        }
        if (index == 5) {
          this.$Router.push(`/pages/scList/scList`)
        }
        if (index == 6) {
          this.$Router.push(`/pages/wdpl/wdpl`)
        }
      },
      cgetfabudailyrecord() {
        getfabudailyrecord().then(res => {
          console.log(res.data, "res");
          if (res) {
            this.setFabuinfo(res.data)
            this.updateplq(this.plIndex, res.data)
          }
        })
      },
      changeTarget(index, id) {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 200
        })
        this.index = index
        this.scrollPositon = (index - 1) * 60
        this.cateId = id
        this.pagenum = 1
        this.total = 0
        this.allData = []
        this.loadText = '加载中...'
        this.isloading = true
        getNewsDetail({
          id: this.cateId
        }).then(res => {
          if (res) {
            this.hotData = res.data.hot
            this.allData = res.data.all.list
            this.total = res.data.all.total
          }
        })
      },
      goSearch() {
        this.$Router.push("/subpkg/search/search")
      },
    },
    // 触底的事件
    onReachBottom() {
      if (this.allData.length >= this.total) {
        uni.showToast({
          title: `数据已到底`,
          icon: 'none'
        })
        this.loadText = '数据加载完毕'
        return
      }
      if (this.isloading) {
        this.isloading = false
        this.pagenum += 1
        getNewsDetail({
          id: this.cateId,
          pageSize: this.pagesize,
          pageNumber: this.pagenum
        }).then(res => {
          this.isloading = true
          if (res) {
            this.total = res.data.all.total;
            this.hotData = res.data.hot
            this.allData = [...this.allData, ...res.data.all.list]

          }
        })
      }
    },
    //下拉刷新
    onPullDownRefresh() {

      this.cgetfocuslist()
      this.cgetdianzanlist()
      this.cgetshoucanglist()
      this.cgetfabudailyrecord()
      this.cgetuserinfo()
      this.cmodeflag()
      this.nowNewsNum = this.allData.length
      getNewsDetail({
        id: this.cateId
      }).then(res => {
        if (res) {
          this.hotData = res.data.hot
          this.allData = res.data.all.list
          this.loadNewsNum = this.allData.length
          uni.showToast({
            title: `数据已更新`,
            icon: 'none'
          })
        }
      }).catch(err => {
        console.log(err);
      }).finally(() => {
        uni.stopPullDownRefresh()
      })
    },
    onShow() {
      this.cgetfocuslist()
      this.cgetdianzanlist()
      this.cgetshoucanglist()
      this.cgetfabudailyrecord()
      this.cgetuserinfo()
      this.cmodeflag()
    },
    onLoad(e) {




      this.cshowindex = +e.to || 0
    },
    onReady() {
      this.urll = 'https://www.ajeee.com/';
      // // #ifdef APP-PLUS
      // let height = 0; //定义动态的高度变量
      // let statusbar = 0; // 动态状态栏高度
      // uni.getSystemInfo({ // 获取当前设备的具体信息
      //   success: (sysinfo) => {
      //     statusbar = sysinfo.statusBarHeight;
      //     height = sysinfo.windowHeight;
      //   }
      // });
      // let currentWebview = this.$parent.$scope.$getAppWebview(); //获取当前web-view
      // setTimeout(function() {
      //   var wv = currentWebview.children()[0];
      //   wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
      //     top: statusbar, //此处是距离顶部的高度，应该是你页面的头部
      //     height: height - statusbar
      //   })
      // }, 200); //如页面初始化调用需要写延迟
      // // #endif
      this.cmodeflag()
      this.cgetfocuslist()
      this.cgetdianzanlist()
      this.cgetshoucanglist()
      this.cgetfabudailyrecord()
      this.isLogin = uni.getStorageSync('token')
      uni.getSystemInfo({
        success: (e) => {
          let statusBar = 0
          let customBar = 0

          // #ifdef MP
          statusBar = e.statusBarHeight
          customBar = e.statusBarHeight + 45
          if (e.platform === 'android') {
            this.setSystemBar(e);
            customBar = e.statusBarHeight + 50
          }
          // #endif

          // #ifdef MP-WEIXIN
          statusBar = e.statusBarHeight
          // @ts-ignore
          const custom = wx.getMenuButtonBoundingClientRect()
          customBar = custom.bottom + custom.top - e.statusBarHeight
          // #endif

          // #ifdef MP-ALIPAY
          statusBar = e.statusBarHeight
          customBar = e.statusBarHeight + e.titleBarHeight
          // #endif

          // #ifdef APP-PLUS
          console.log('app-plus', e)
          statusBar = e.statusBarHeight
          customBar = e.statusBarHeight + 45
          // #endif


          // #ifdef H5
          statusBar = 0
          customBar = e.statusBarHeight + 45
          // #endif

          // 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
          this.setStatusBar(statusBar);
          this.setCustomBar(customBar);
          this.setSystemBar(e);
          console.log(this.customBar, 'custom高度');
        }
      })
      getNewsCate().then(res => {
        this.list = res.data
        this.cateId = res.data[0]._id
      })
      getNewsDetail({
        id: this.cateId
      }).then(res => {
        if (res) {
          this.hotData = res.data.hot
          this.allData = res.data.all.list
          this.total = res.data.all.total
        }
      })

    }
  }
</script>

<style lang="scss" scoped>
  .swiper {
    width: 100vw;
    height: 100vh;
  }

  .swiper-item {
    width: 100vw;
    height: 100vh;
    z-index: 9;
  }

  .swiper-img {
    width: 100%;
    height: 100%;
  }


  .wdll {
    color: white;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }

  .title {
    width: 100vw;
    font-size: 22rpx;
    color: #cccccc;
    display: flex;
    margin-top: 20rpx;
    justify-content: center;
  }

  .plmain {
    width: 100vw;
    height: 1000rpx;
    background-color: white;
    border-radius: 20rpx;
    padding: 20rpx 0;
    position: relative;



    .item {
      padding: 0 30rpx;
      display: flex;
      justify-content: space-between;
      margin-top: 40rpx;

      .itemright {
        width: calc(100% - 100rpx);

        .info {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .nickname {
            font-size: 22rpx;
            color: #c00000;
            font-weight: 600;
          }

          .time {
            font-size: 20rpx;
            color: #cccccc;
            margin-top: 20rpx;
          }
        }

        .itemcontent {
          width: 100%;
          min-height: 100rpx;
          margin-top: 20rpx;
          color: white;
        }

        .plq {
          width: 100%;
          height: 200rpx;
          background-color: rgba(226, 226, 226, 0.3);
          margin-top: 10rpx;
          padding: 22rpx;
          box-sizing: border-box;
          position: relative;

          .all {
            font-size: 20rpx;
            color: deepskyblue;
            display: flex;
            align-items: center;
            position: absolute;
            bottom: 20rpx;
            left: 20rpx;
          }

          .plqitem {
            font-size: 24rpx;
            margin-bottom: 14rpx;

            text {
              color: deepskyblue;
              font-weight: 600;
            }

            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }

  .sendKey {
    width: 100vw;
    min-height: 100rpx;
    background-color: white;
    position: fixed;
    -moz-box-shadow: 4rpx 4rpx 10rpx #000;
    -webkit-box-shadow: 4rpx 4rpx 10rpx #000;
    box-shadow: 4rpx 4rpx 10rpx #000;
    bottom: 0;

    .sendKeya {
      width: 100vw;
      min-height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28rpx;
      box-sizing: border-box;

      textarea {
        width: calc(100% - 160rpx);
        min-height: 60rpx;
        color: black;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        border-radius: 20rpx;
        border: 2rpx solid black;
        text-indent: 8rpx;
        padding: 20rpx;
        box-sizing: border-box;
      }

      .sendBtn {
        width: 120rpx;
        height: 60rpx;
        background-color: red;
        color: white;
        display: flex;
        font-size: 28rpx;
        border-radius: 8rpx;
        justify-content: center;
        align-items: center;
      }
    }

  }

  /deep/ .u-album {
    display: flex;
    flex-direction: column;
    width: 444rpx;
    margin: 0 auto;
  }

  .videoindex {
    width: 100%;
    min-height: calc(100vh - 100rpx);
    color: white;
    background-color: red;
    padding: var(--status-bar-height) 0rpx 0rpx;
    box-sizing: border-box;
  }

  .five14index {
    width: 100%;
    min-height: calc(100vh - 100rpx);
    color: white;
    background-color: black;

    box-sizing: border-box;
    padding: var(--status-bar-height) 20rpx 0rpx;

    .u-demo-block__content {
      width: 700rpx;
      background-color: black;
      margin: 200rpx auto;
      height: 500rpx;

      .album {
        color: white;
        display: flex;
        align-items: flex-start;

        .album__content {
          width: 20rpx;
        }
      }

      .gzbtn {
        width: 100rpx;
        height: 50rpx;
        font-size: 26rpx;
        border-radius: 6rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fd002e;
      }

      .ygzbtn {
        width: 100rpx;
        height: 50rpx;
        font-size: 26rpx;
        border-radius: 6rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #c00000;

      }

      .footer {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        margin-top: 20rpx;

        .item {
          width: 130rpx;
          justify-content: space-around;
          display: flex;
          font-size: 24rpx;
          align-items: center;
          color: white;
        }
      }

      .album {
        @include flex;
        align-items: flex-start;
        color: white;

        &__avatar {
          background-color: $u-bg-color;
          padding: 10rpx;
          border-radius: 6rpx;
        }

        &__content {
          margin-left: 40rpx;
          flex: 1;
        }
      }

    }

  }

  .scrollView {
    white-space: nowrap;
    width: 100%;
    margin-top: calc(var(--status-bar-height) + 100rpx);
    position: fixed;
    /* #ifdef MP-WEIXIN */
    top: 70rpx;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    top: 0;
    /* #endif */
    z-index: 10;
  }

  .wdl {
    width: 100vw;
    height: 100vh;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;

    .dlbtn {
      width: 160rpx;
      height: 160rpx;
      background-color: #c00000;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 44rpx;
      border-radius: 50%;
    }
  }

  .mineindex {
    width: 100vw;
    height: calc(100vh - 100rpx);
    background-color: #c00000;
    color: white;
    box-sizing: border-box;
    padding-top: var(--status-bar-height);

    .mainInfo {
      font-weight: 600;
    }

    .fun {
      width: 100vw;
      height: calc(50% - 370rpx);
      background-color: black;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;

      .item {
        width: 25%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .name {
          margin-top: 8rpx;
          font-size: 26rpx;

        }
      }
    }

    .fabu {
      width: 100vw;
      height: calc(50% - 40rpx);
      background-color: black;
      display: flex;
      align-items: center;
      justify-content: center;

      .info {
        display: flex;
        flex-direction: column;
        font-size: 28rpx;
        align-items: center;
        justify-content: center;

        .btn {
          width: 140rpx;
          height: 70rpx;
          background-color: red;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 10rpx;
          margin-top: 40rpx;

          text {
            font-weight: 600;
            font-size: 28rpx;
            margin-left: 6rpx;
          }
        }
      }

    }

    .mainInfo {
      width: 100vw;
      height: 400rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .nickname {
        margin-top: 20rpx;
        box-sizing: border-box;
        font-size: 30rpx;

      }
    }
  }

  .index {
    width: 100vw;
    height: auto;
    background-color: black;

    .top {
      position: fixed;
      top: 0;
      z-index: 10;
    }

    .test {
      padding-top: calc(var(--status-bar-height) + 180rpx);
      min-height: 100vh;
      width: 100vw;
      background-color: black;
      color: white;

      .testh {
        width: 100%;
        height: 150rpx;
        color: white;
        display: flex;
        justify-content: center;
      }

      .testa {
        width: 100%;
        background-color: black;
        height: 350rpx;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .hot {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 50rpx;
          box-sizing: border-box;
          font-size: 26rpx;

          .title {
            width: 680rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .btext {
            font-size: 22rpx;

            text:nth-child(1) {
              color: red;
            }

            text:nth-child(2) {
              margin: 0 16rpx;
            }
          }
        }
      }

      .testb {
        padding: 0 20rpx;
        margin-top: 60rpx;
        box-sizing: border-box;

        .item {
          display: flex;
          width: 100vw;
          height: 136rpx;
          margin-bottom: 40rpx;

          .left {
            width: calc(100% - 240rpx);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .left_title {
              font-size: 27rpx;
            }

            .left_detail {
              font-size: 22rpx;

              text:nth-child(2) {
                margin: 0 30rpx;
              }
            }
          }

          .right {
            width: 180rpx;
            height: 136rpx;
            display: flex;
            align-items: center;
            border: 2rpx solid white;
            // border: 2rpx solid red;
            border-radius: 8rpx;

            image {
              width: 100%;
              border-radius: 8rpx;
            }
          }
        }
      }
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .publish {
      font-size: 24rpx;
      text-align: center;
    }
  }



  .cate {
    width: 120rpx;
    height: 70rpx;
    background-color: rgba(21, 21, 21, 1.0);
    display: inline-block;
    line-height: 70rpx;
    text-align: center;
    font-size: 28rpx;
    color: white;

    .tb {
      display: block;
      display: flex;
      justify-content: center;
    }

    .tbact {
      display: block;
      display: flex;
      justify-content: center;
      position: relative;

      &::after {
        content: "";
        display: block;
        width: 40rpx;
        height: 4rpx;
        background-color: red;
        bottom: 8rpx;
        position: absolute;
      }
    }
  }

  .act {
    color: red;
    font-weight: 800;
  }
</style>
